/*
 * @Author: xiaosihan 
 * @Date: 2024-01-09 09:02:02 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-01-09 09:09:26
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./colorPickCanvas.module.less";
import editorStore from "@/editorComponent/editorStore";
import designEditor from "@/editorComponent/designEditor";
import clsx from "clsx";

interface Iprops {
    children?: ReactNode
}

// 颜色拾取canvas
export default function ColorPickCanvas(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const canvasDom = useRef<HTMLCanvasElement>(null);
    const cacheCanvas = useRef(document.createElement("canvas"));
    const [colorPicker, setColorPicker] = useState(editorStore.colorPicker);
    const [data, setData] = useState({});

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {

    }), []);

    useEffect(() => autorun(() => {
        if (editorStore.colorPicker) {
            const designCanvas = designEditor.fabricCanvas.getElement();
            cacheCanvas.current.width = (1024 * window.devicePixelRatio);
            cacheCanvas.current.height = (1024 * window.devicePixelRatio);
            const cachCtx = cacheCanvas.current.getContext("2d")!;
            cachCtx.drawImage(designCanvas, 0, 0);
        }
        setColorPicker(editorStore.colorPicker);
    }), []);

    useEffect(() => autorun(() => {
        if (dom.current) {
            dom.current.style.transform = `translate(calc(-50%),  calc( -50% + 56px) ) scale(${editorStore.scale / 100})`;
        }
    }), []);

    // 绘制放大的效果
    const mouseMove = (e: any) => {
        const width = (1024 * window.devicePixelRatio);
        const height = (1024 * window.devicePixelRatio);
        const designCanvs = designEditor.fabricCanvas.getElement();
        const ctx = canvasDom.current!.getContext("2d")!;
        const { offsetX, offsetY } = e.nativeEvent;
        const x = offsetX * window.devicePixelRatio;
        const y = offsetY * window.devicePixelRatio;
        
        //清理画布
        ctx.clearRect(0, 0, width, height);

        ctx.save();

        //绘制放大的效果
        ctx.beginPath();
        ctx.arc(x + 90 + 40, y + 90 + 40, 90, 0, 2 * Math.PI, false);
        ctx.clip();
        ctx.imageSmoothingEnabled = false;
        ctx.drawImage(designCanvs, x - 4.62, y - 4.6, 9, 9, x + 40, y + 40, 180, 180);
        ctx.lineWidth = 4;
        ctx.setLineDash([10, 10]);
        ctx.strokeStyle = "#FD7901";
        ctx.stroke();
        ctx.lineWidth = 2;
        ctx.setLineDash([0, 0]);
        ctx.strokeRect(x + 90 + 40 - 10, y + 90 + 40 - 10, 20, 20);

        ctx.restore();

        // 获取坐标位置的颜色
        const cachCtx = cacheCanvas.current.getContext("2d")!;
        var imageData = cachCtx.getImageData(x, y, 1, 1);
        var pixelData = imageData.data;
        // 将RGBA格式的像素数据转换为十六进制格式
        var hexColor = "#" + ("000000" + ((pixelData[0] << 16) | (pixelData[1] << 8) | pixelData[2]).toString(16)).slice(-6);
        editorStore.setPickerColor(hexColor);
    }

    const mouseDown = (e: any) => {
        // 左键点击结束吸色
        if (e.button === 0) {
            editorStore.setColorPicker(false);
        } else if (e.button === 2) {
            editorStore.setPickerColor(editorStore.originColor);
            editorStore.setColorPicker(false);
        }
        e.stopPropagation();
        e.preventDefault();
    }

    return (
        <div
            ref={dom}
            className={styles.colorPickCanvas}
        >
            <canvas
                width={1024 * window.devicePixelRatio}
                height={1024 * window.devicePixelRatio}
                ref={canvasDom}
                className={clsx(styles.canvas, colorPicker && styles.show)}
                onMouseMove={mouseMove}
                onMouseDown={mouseDown}
            />
        </div>
    );

}